import './index.scss'
import {useState} from "react";
import greyImg from '@/assets/images/grey.png'
import {useStore} from "@/store/index.jsx";
import {observer} from "mobx-react-lite";
import yellowImg from '@/assets/images/yellow.png'
import {autorun} from "mobx";
import MyDrawer from "@/components/BottomBar/MyDrawer/index.jsx";
import classNames from "classnames";

const BottomBar = () => {
    const {listStore} = useStore()
    const [drawerOpen, setDrawerOpen] = useState(false) //抽屉打开
    const handleOpen = () => {
        if (listStore.carList.length === 0) return false
        setDrawerOpen(!drawerOpen)
    }
    return (
        <>
            <div className={'bottom-bar'} onClick={handleOpen}>
                <div className={'left'}>
                    {listStore.carList.length > 0 && <i className={'num'}>{listStore.total}</i>}
                    <img className={classNames(['img', listStore.carList.length > 0 ? 'yellow' : ''])}
                         src={(listStore.carList.length === 0) ? greyImg : yellowImg} alt=""/>

                    <div className={'price'}>
                        {/*购物车总价*/}
                        <span
                            className={'text'}>¥ {listStore.carList.length > 0 ? Math.floor(listStore.price * 100) / 100 : 0} </span> {/*只保留小数点后两位*/}
                        <span className={'freight text'}>预估配送费 ¥0</span>
                    </div>
                </div>
                <div className={'right'}>
                    {listStore.carList.length > 0 ? <div onClick={(e) => {
                            e.stopPropagation()
                        }} className={'countBtn'}>去结算</div> :
                        <span style={{color: '#757677', fontSize: '13px'}}>¥20 起送</span>}
                </div>
            </div>
            <MyDrawer open={drawerOpen}></MyDrawer>
        </>)
}
export default observer(BottomBar)